Description

This PR fixes aria-label handling issues in button components and improves accessibility for pending state controllers. The changes ensure that aria-labels are properly managed and preserved across component state changes, providing better screen reader support.

Key Changes:

Button Component (@spectrum-web-components/button):

• Fixed timing of aria-label updates to occur after slot content changes are processed, preventing race conditions
• Added label property support for programmatic aria-label control in Storybook
• Added comprehensive tests for aria-label behavior during content changes
• Moved aria-label management logic to execute after slot content processing

PendingState Controller (@spectrum-web-components/reactive-controllers):

• Improved aria-label caching logic to better handle dynamic label changes
• Changed progress circle from aria-valuetext to aria-label for better accessibility compliance
• Enhanced caching mechanism to preserve user-set aria-labels during pending states
• Added more robust logic for determining when to cache aria-labels

Motivation and context

The previous implementation had timing issues, allowing aria-label updates to occur before slot content changes were fully processed, leading to inconsistent accessibility behavior. Additionally, the pending state controller was using aria-valuetext instead of aria-label for progress indicators, which is not the recommended approach for accessibility.

These changes ensure that:

• Screen readers receive consistent and accurate aria-label information
• User-set aria-labels are properly preserved during component state changes
• Progress indicators follow accessibility best practices
• Dynamic content changes don't interfere with aria-label management

Related issue(s)

• fixes [5620]
• resolves SWC-1039

Screenshots (if appropriate)

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Button aria-label timing test

1. Go to the button Storybook stories
2. Set a label property on a button with slot content
3. Change the slot content dynamically
4. Verify that the aria-label remains consistent and doesn't get overridden

• Pending state aria-label preservation test

1. Go to any component that uses the PendingState controller (like buttons with pending states)
2. Set a custom aria-label on the component
3. Trigger the pending state
4. Verify that the custom aria-label is cached and restored when pending state ends

• Progress circle accessibility test

1. Go to components with pending states
2. Use a screen reader to navigate to the progress indicator
3. Verify that the progress circle announces properly with aria-label instead of aria-valuetext

• Dynamic content changes test

1. Create a button with both slot content and a label property
2. Dynamically change the slot content multiple times
3. Verify that the aria-label from the label property is preserved throughout

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?